<template>
    <div class="white-box">
        <el-tabs v-model="tabName" @tab-click="clickTab">
            <el-tab-pane label="会员概况" name="0">
                <div class="tab-cont">
                    <div class="user-one">
                        <el-image class="user-img" :src="proxy.imgUrl + objs.face + '!img_400'" fit="cover" v-if="objs.face" />
                        <div class="user-one__right">
                            <p class="user-one__title">{{ objs.nickname }}</p>
                            <p class="user-one__text">
                                会员UID：{{ objs.uid }}<span class="user-line"></span>创建时间：{{ objs.created_at_label
                                }}<span class="user-line"></span>推荐人：{{ objs.invite ? objs.invite.name : "无"
                                }}<em v-if="objs.invite">[{{ objs.invite.uid }}]</em>
                            </p>
                            <div class="od-one">
                                <div class="od-one__item">
                                    <detail-item title="会员姓名" one-value title-width="60px" bottom="16px" :value="objs.name || '--'" />
                                    <detail-item title="当前余额" one-value title-width="60px" bottom="16px" :value="objs.money || '0.00'" />
                                    <detail-item
                                        title="会员等级"
                                        one-value
                                        title-width="60px"
                                        bottom="16px"
                                        :value="objs.user_grade ? objs.user_grade.level_name : '--'"
                                    />
                                </div>
                                <div class="od-one__item">
                                    <detail-item title="手机号码" one-value title-width="60px" bottom="16px" :value="objs.mobile || '--'" />
                                    <detail-item title="授信余额" one-value title-width="60px" bottom="16px" :value="objs.credit || '0.00'" />
                                    <detail-item title="小程序openid" one-value title-width="89px" bottom="16px" title-align="left" :value="objs.xcx_openid" />
                                </div>
                                <div class="od-one__item">
                                    <detail-item
                                        title="标签分组"
                                        one-value
                                        title-width="60px"
                                        bottom="16px"
                                        :value="objs.tag_id > 0 ? objs.user_tag.title : '--'"
                                    />
                                    <detail-item title="成长值" one-value title-width="60px" bottom="16px" :value="objs.exp_point || '0.00'" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="user-two">
                        <title-more title="消费信息" />
                        <detail-item title="最近消费金额" one-value bottom="16px" :value="objs.order ? objs.order.amount : '--'" />
                        <detail-item title="最近消费时间" one-value bottom="16px" :value="objs.order ? objs.order.created_at_label : '--'" />
                        <detail-item title="累计消费" one-value bottom="16px" :value="objs.total_pay || 0" />
                        <detail-item title="累计订单数" one-value bottom="40px" :value="objs.orders || 0" />

                        <title-more title="账户资产" />
                        <detail-item title="余额" one-value bottom="16px" :value="objs.money || 0" />
                        <detail-item title="总授信额度" one-value bottom="16px" :value="objs.total_credit || 0" />
                        <detail-item title="授信余额" one-value bottom="16px" :value="objs.credit || 0" />
                        <detail-item title="可用优惠券(张)" one-value bottom="16px" :value="objs.coupon_number || 0" />
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="消费订单" name="1">
                <div class="tab-cont">
                    <div class="statistics-box">
                        <div class="statistics-item">
                            <p class="statistics-title">总订单（笔）</p>
                            <p class="statistics-num">{{ objs.orders || 0 }}</p>
                        </div>
                        <div class="statistics-item">
                            <p class="statistics-title">总消费金额（元）</p>
                            <p class="statistics-num">{{ objs.total_pay || "0.00" }}</p>
                        </div>
                    </div>
                    <el-table
                        class="table-mb"
                        :data="orderArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="table_loading"
                    >
                        <el-table-column prop="order_sn" label="订单编号"></el-table-column>
                        <el-table-column label="收货人">
                            <template #default="{ row }">
                                <p>姓名：{{ row.contact }}</p>
                                <p>手机号：{{ row.mobile }}</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="total_price" label="商品总价"></el-table-column>
                        <el-table-column prop="amount" label="实付金额"></el-table-column>
                        <el-table-column label="交易完成时间">
                            <template #default="{ row }">
                                {{ row.last_time > 0 ? row.last_time_label : "--" }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="order_page"
                        :page-size="20"
                        :total="order_total"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="成长值" name="2">
                <div class="tab-cont">
                    <el-table
                        class="table-mb"
                        :data="expArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="table_loading"
                    >
                        <el-table-column prop="old_val" label="变动前"></el-table-column>
                        <el-table-column prop="number" label="变动成长值"></el-table-column>
                        <el-table-column prop="val" label="变动后"></el-table-column>
                        <el-table-column prop="type_label" label="类型"></el-table-column>
                        <el-table-column prop="created_at_label" label="创建时间"></el-table-column>
                        <el-table-column prop="intro" label="备注"></el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="exp_page"
                        :page-size="20"
                        :total="exp_total"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="持有的优惠券" name="3">
                <div class="tab-cont">
                    <el-table
                        class="table-mb"
                        :data="couponArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="table_loading"
                    >
                        <el-table-column prop="title" label="优惠券名称"></el-table-column>
                        <el-table-column prop="coupon_amount" label="面值"></el-table-column>
                        <el-table-column prop="l_time_label" label="有效期至"></el-table-column>
                        <el-table-column prop="created_at_label" label="领取时间"></el-table-column>
                        <el-table-column label="操作" width="120">
                            <template #default="{ row }">
                                <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(row)">
                                    <template #reference>
                                        <el-button link type="primary" class="theme-btn">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="coupon_page"
                        :page-size="20"
                        :total="coupon_total"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="余额变动记录" name="4">
                <div class="tab-cont">
                    <el-table
                        class="table-mb"
                        :data="balanceArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="table_loading"
                    >
                        <el-table-column prop="old_val" label="变动前"></el-table-column>
                        <el-table-column prop="number" label="变动金额"></el-table-column>
                        <el-table-column prop="val" label="变动后"></el-table-column>
                        <el-table-column prop="type_label" label="类型"></el-table-column>
                        <el-table-column prop="created_at_label" label="创建时间"></el-table-column>
                        <el-table-column prop="intro" label="备注"></el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="balance_page"
                        :page-size="20"
                        :total="balance_total"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="授信额度" name="5">
                <div class="tab-cont">
                    <el-table
                        class="table-mb"
                        :data="quotaArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="table_loading"
                    >
                        <el-table-column prop="old_val" label="变动前"></el-table-column>
                        <el-table-column prop="number" label="变动金额"></el-table-column>
                        <el-table-column prop="val" label="变动后"></el-table-column>
                        <el-table-column prop="type_label" label="类型"></el-table-column>
                        <el-table-column prop="created_at_label" label="创建时间"></el-table-column>
                        <el-table-column prop="intro" label="备注"></el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="quota_page"
                        :page-size="20"
                        :total="quota_total"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="代理返佣" name="6">
                <div class="tab-cont">
                    <el-table
                        class="table-mb"
                        :data="agentArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="table_loading"
                    >
                        <el-table-column prop="old_val" label="变动前"></el-table-column>
                        <el-table-column prop="number" label="变动金额"></el-table-column>
                        <el-table-column prop="val" label="变动后"></el-table-column>
                        <el-table-column prop="type_label" label="类型"></el-table-column>
                        <el-table-column prop="created_at_label" label="创建时间"></el-table-column>
                        <el-table-column prop="intro" label="备注"></el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="agent_page"
                        :page-size="20"
                        :total="agent_total"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="收货地址" name="7">
                <div class="tab-cont">
                    <el-button type="primary" @click="dialogAddr = true">添加地址</el-button>
                    <el-table
                        class="table-mb"
                        :data="addrArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                        v-loading="table_loading"
                        style="margin-top: 20px"
                    >
                        <el-table-column prop="contact" label="姓名" min-width="120"></el-table-column>
                        <el-table-column prop="mobile" label="电话" min-width="160"></el-table-column>
                        <el-table-column label="详细地址" min-width="380">
                            <template #default="{ row }"> {{ row.addr + row.house }} </template>
                        </el-table-column>
                        <!-- <el-table-column label="默认地址">
                            <template #default="{ row }">
                                <span style="color: #4b93fa">{{ row.is_default == 1 ? "是" : "否" }}</span>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="created_at_label" label="创建时间" min-width="160"></el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        v-model:current-page="addr_page"
                        :page-size="20"
                        :total="addr_total"
                        layout="total, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>

        <!-- 添加地址 -->
        <el-dialog v-model="dialogAddr" title="添加地址" width="580px" :append-to-body="true" :destroy-on-close="true" @close="closeAddr">
            <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheck" label-width="120px">
                <el-form-item label="收货人姓名" prop="name">
                    <el-input v-model.trim="ruleForm.name" clearable placeholder="请输入收货人姓名" />
                </el-form-item>
                <el-form-item label="手机号" prop="tel">
                    <el-input
                        v-model.trim="ruleForm.tel"
                        oninput="value=value.replace(/[^\d]/g,'')"
                        maxlength="11"
                        clearable
                        placeholder="请输入手机号"
                    />
                </el-form-item>
                <el-form-item label="经纬度" prop="lat_lng">
                    <el-input
                        v-model.trim="ruleForm.lat_lng"
                        readonly
                        :suffix-icon="ArrowRight"
                        placeholder="请选择当前位置的经纬度"
                        clearable
                        @click="clickLatAndLng"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="所在地区" prop="area_code">
                    <el-cascader
                        ref="cascaderRef"
                        v-model="ruleForm.area_code"
                        :props="props"
                        :options="allArea"
                        clearable
                        placeholder="请选择省市区"
                    />
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model.trim="ruleForm.address" type="textarea" clearable :rows="3" placeholder="请输入详细地址" />
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 20px">
                        <el-button type="primary" :loading="form_loading" @click="submitForm(ruleRef)">确认</el-button>
                        <el-button @click="resetForm(ruleRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 获取经纬度 -->
        <el-dialog
            v-model="dialogMap"
            title="获取经纬度"
            width="600px"
            :close-on-click-modal="false"
            :append-to-body="true"
            :destroy-on-close="true"
            draggable
        >
            <div class="p16">
                <div class="task-one">
                    <div class="task-one__item">
                        <span class="task-one__label">地址：</span>
                        <el-input placeholder="输入地址获取经纬度" v-model.trim="addrs" clearable style="width: 280px"></el-input>
                    </div>
                    <div class="task-one__btn">
                        <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">获取</el-button>
                    </div>
                </div>
                <div id="container"></div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="confirmMap">确认地址</el-button>
                    <el-button @click="dialogMap = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, reactive, onBeforeUnmount } from "vue"
import { useRoute } from "vue-router"
import { ArrowRight, Search } from "@element-plus/icons-vue"
import { jsonp } from "vue-jsonp"
import GoBack from "@components/GoBack.vue"
import DetailItem from "@components/DetailItem.vue"
import TitleMore from "@components/title-more.vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

let uid = route.query.uid || ""
onMounted(() => {
    uid && getDetail()
    getArea()
})

// 销毁
onBeforeUnmount(() => {
    map = null
    marker = null
    cascaderRef.value = null
    ruleRef.value = null
    // 移除绑定事件
    window.removeEvent = function () {
        qq.maps.event.removeListener(eventDragend)
        eventDragend = null
    }

})

const tabName = ref("0")
const clickTab = (pane) => {
    tabName.value = pane.index
    typeArrs.value[tabName.value].loading && getPublic()
}
function getPublic() {
    tabName.value == 0 && getDetail()
    tabName.value == 1 && getOrder()
    tabName.value == 2 && getExps()
    tabName.value == 3 && getCoupon()
    tabName.value == 4 && getBalance()
    tabName.value == 5 && getQuota()
    tabName.value == 6 && getAgent()
    tabName.value == 7 && getAddr()
}

// 详情
const objs = ref({})
const typeArrs = ref([
    {
        loading: true,
        type: "detail",
    },
    {
        loading: true,
        type: "order",
    },
    {
        loading: true,
        type: "exp_point",
    },
    {
        loading: true,
        type: "coupon",
    },
    {
        loading: true,
        type: "money",
    },
    {
        loading: true,
        type: "credit",
    },
    {
        loading: true,
        type: "award",
    },
    {
        loading: true,
        type: "", // 用户地址另外调地址列表接口
    },
])
function getDetail() {
    proxy.$axios
        .get("user/detail", {
            params: {
                type: typeArrs.value[tabName.value].type,
                uid,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                typeArrs.value[tabName.value].loading = false
                objs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 消费订单
 * @param {Boolean} table_loading 表格加载
 * @param {Number} order_page 页码
 * @param {Number} order_total 总数
 * @param {Array} orderArrs 商品数组
 */
const order_page = ref(1)
const order_total = ref(0)
const orderArrs = ref([])
watch(order_page, (val) => {
    orderArrs.value = []
    getOrder()
})
function getOrder() {
    table_loading.value = true
    proxy.$axios
        .get("user/detail", {
            params: {
                type: typeArrs.value[tabName.value].type,
                uid,
                page: order_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                order_total.value = res.data.count
                orderArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 成长值
 * @param {Boolean} table_loading 表格加载
 * @param {Number} exp_page 页码
 * @param {Number} exp_total 总数
 * @param {Array} expArrs 商品数组
 */
const table_loading = ref(false)
const exp_page = ref(1)
const exp_total = ref(0)
const expArrs = ref([])
watch(exp_page, (val) => {
    expArrs.value = []
    getExps()
})
function getExps() {
    table_loading.value = true
    proxy.$axios
        .get("user/detail", {
            params: {
                type: typeArrs.value[tabName.value].type,
                uid,
                page: exp_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                exp_total.value = res.data.count
                expArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 持有优惠券
 * @param {Number} coupon_page 页码
 * @param {Number} coupon_total 总数
 * @param {Array} couponArrs 商品数组
 */
const coupon_page = ref(1)
const coupon_total = ref(0)
const couponArrs = ref([])
watch(coupon_page, (val) => {
    couponArrs.value = []
    getCoupon()
})
const clickDel = (row) => {
    proxy.$axios
        .get("user/detail", {
            params: {
                uid,
                cid: row.cid,
                type: "coupon_delete",
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                couponArrs.value = []
                getCoupon()
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
function getCoupon() {
    table_loading.value = true
    proxy.$axios
        .get("user/detail", {
            params: {
                type: typeArrs.value[tabName.value].type,
                uid,
                page: coupon_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                coupon_total.value = objs.value.coupon_number = res.data.count
                couponArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 余额变动记录
 * @param {Number} balance_page 页码
 * @param {Number} balance_total 总数
 * @param {Array} balanceArrs 商品数组
 */
const balance_page = ref(1)
const balance_total = ref(0)
const balanceArrs = ref([])
watch(balance_page, (val) => {
    balanceArrs.value = []
    getBalance()
})
function getBalance() {
    table_loading.value = true
    proxy.$axios
        .get("user/detail", {
            params: {
                type: typeArrs.value[tabName.value].type,
                uid,
                page: balance_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                balance_total.value = res.data.count
                balanceArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 余额变动记录
 * @param {Number} quota_page 页码
 * @param {Number} quota_total 总数
 * @param {Array} balanceArrs 商品数组
 */
const quota_page = ref(1)
const quota_total = ref(0)
const quotaArrs = ref([])
watch(quota_page, (val) => {
    quotaArrs.value = []
    getQuota()
})
function getQuota() {
    table_loading.value = true
    proxy.$axios
        .get("user/detail", {
            params: {
                type: typeArrs.value[tabName.value].type,
                uid,
                page: quota_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                quota_total.value = res.data.count
                quotaArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 代理返佣
 * @param {Number} agent_page 页码
 * @param {Number} agent_total 总数
 * @param {Array} balanceArrs 商品数组
 */
const agent_page = ref(1)
const agent_total = ref(0)
const agentArrs = ref([])
watch(agent_page, (val) => {
    agentArrs.value = []
    getAgent()
})
function getAgent() {
    table_loading.value = true
    proxy.$axios
        .get("user/detail", {
            params: {
                type: typeArrs.value[tabName.value].type,
                uid,
                page: agent_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                agent_total.value = res.data.count
                agentArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 收货地址-外调地址列表接口
 * @param {Number} addr_page 页码
 * @param {Number} addr_total 总数
 * @param {Array} addrArrs 商品数组
 */
const addr_page = ref(1)
const addr_total = ref(0)
const addrArrs = ref([])
watch(addr_page, (val) => {
    addrArrs.value = []
    getAddr()
})
function getAddr() {
    table_loading.value = true
    proxy.$axios
        .get("user/addr/index", {
            params: {
                uid,
                page: addr_page.value,
                limit: 20,
            },
        })
        .then((res) => {
            table_loading.value = false
            typeArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                addr_total.value = res.data.count
                addrArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            table_loading.value = false
        })
}

/**
 * 添加地址
 * @param {Boolean} dialogAddr 弹窗状态
 * @param {Boolean} form_loading 表单按钮状态
 * @param {Array} ruleRef 表单规则
 * @param {Object} ruleForm  表单字段
 * @param {Object} ruleCheck  表单提示
 */
const dialogAddr = ref(false)
const form_loading = ref(false)
const ruleRef = ref(null)
const ruleForm = reactive({
    name: "",
    tel: "",
    area_code: [],
    address: "",
    lat_lng: [],
})
const ruleCheck = reactive({
    name: [{ required: true, message: "请输入收货人姓名", trigger: "blur" }],
    tel: [{ required: true, validator: proxy.$util.validPhone, trigger: "blur" }],
    lat_lng: [{ required: true, type: "array", message: "请选择当前位置的经纬度", trigger: "change" }],
    area_code: [{ required: true, type: "array", message: "请选择省市区", trigger: "change" }],
    address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
})
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            let areas = cascaderRef.value.getCheckedNodes()
            form_loading.value = true
            let data = {
                uid: uid,
                contact: ruleForm.name,
                mobile: ruleForm.tel,
                province_code: ruleForm.area_code ? ruleForm.area_code[0] : "",
                city_code: ruleForm.area_code ? ruleForm.area_code[1] : "",
                district_code: ruleForm.area_code ? ruleForm.area_code[2] : "",
                province: areas[0].pathLabels[0],
                city: areas[0].pathLabels[1],
                district: areas[0].pathLabels[2],
                lat: ruleForm.lat_lng[0],
                lng: ruleForm.lat_lng[1],
                addr: areas[0].pathLabels[0] + areas[0].pathLabels[1] + areas[0].pathLabels[2],
                house: ruleForm.address,
            }
            proxy.$axios
                .post("user/addr/add", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "添加成功！", type: "success" })
                        dialogAddr.value = false
                        addr_page.value = 1
                        addr_total.value = 0
                        addrArrs.value = []
                        getAddr()
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const closeAddr = () => {
    resetForm(ruleRef.value)
    dialogAddr.value = false
}

/**
 * 选择省市区
 * @param {Array} allArea 存放省市区数组
 * @param {Object} cascaderRef 容器ref
 * @param {Function} getArea 请求json
 */
const allArea = ref([])
const cascaderRef = ref(null)
const props = {
    label: "name",
    value: "adcode",
    children: "districts",
}
function getArea() {
    proxy.$axios
        .get("gaode-area.json")
        .then((res) => {
            let result = res.data.districts
            allArea.value = result[0].districts
        })
        .catch((err) => {})
}

/**
 * 腾讯地图-根据地址获取经纬度
 * @param {Boolean} dialogMap 地图弹窗
 * @param {String} locations 经纬度地址
 * @param {String} addrs 搜索字段
 * @param {Object} map Map 构造函数创建地图
 * @param {Function} initMap 初始化地图
 */
var map = null,
    marker = null,
    eventDragend = null
const addrs = ref("")
const locations = ref("")
const search_btn = ref(false)
const dialogMap = ref(false)
const handleSearch = () => {
    if (addrs.value == "") {
        proxy.$message({ message: "请输入详细地址！", type: "warning" })
        return
    }
    search_btn.value = true
    jsonp("https://apis.map.qq.com/ws/geocoder/v1/?address=", {
        output: "jsonp",
        address: addrs.value,
        key: "RIRBZ-LYM6O-Z73WF-S4A5Z-IEUB5-DXFYZ",
    })
        .then((res) => {
            search_btn.value = false
            if (res.status == 0) {
                locations.value = `${res.result.location.lat},${res.result.location.lng}`
                let center = new qq.maps.LatLng(res.result.location.lat, res.result.location.lng)
                map.panTo(center) // 重新设置地图中心点
                initMap(res.result.location.lat, res.result.location.lng)
            } else {
                proxy.$message({ message: res.message, type: "warning" })
            }
        })
        .catch((err) => {
            search_btn.value = false
        })
}
const clickLatAndLng = () => {
    dialogMap.value = true
    setTimeout(() => {
        initMap()
    }, 50)
}
const confirmMap = () => {
    dialogMap.value = false
    ruleForm.lat_lng = locations.value.split(",")
}
function initMap(lat = 39.90923, lng = 116.397428) {
    let myLatlng = new qq.maps.LatLng(lat, lng)
    let myOptions = {
        zoom: 17,
        center: myLatlng,
    }
    map = new qq.maps.Map(document.getElementById("container"), myOptions)
    marker = new qq.maps.Marker({
        // 设置标记
        position: myLatlng,
        draggable: true,
        animation: qq.maps.MarkerAnimation.DROP,
        map: map,
    })
    eventDragend = qq.maps.event.addListener(marker, "dragend", function (e) {
        // 监听标记拖动
        let latLng = marker.getPosition()
        map.setCenter(latLng)
        let lats = latLng.lat.toFixed(6)
        let lng = latLng.lng.toFixed(6)
        locations.value = `${lats},${lng}`
    })
}
</script>
<script>
export default {
    name: "MemberDetail",
}
</script>

<style lang="less" scoped>
#container {
    width: 100%;
    height: 400px;
}
.statistics-box {
    display: flex;
    margin-bottom: @margin-mdl;
    .statistics-item {
        flex: none;
        width: 24%;
        // background-color: #F5F7FA;
        border: 1px solid @gray-3;
        border-radius: @radius-sm;
        padding: @padding-mdl;
        margin-right: 1.3%;
        &:last-child {
            margin-right: 0;
        }
        .statistics-title {
            font-size: @font-size-md;
            color: @gray-8;
            margin-bottom: @margin-sm;
        }
        .statistics-num {
            font-size: 22px;
            color: #111;
            font-weight: bold;
        }
    }
}
.tab-cont {
    margin-top: 5px;
}
.user-one {
    display: flex;
    .user-img {
        width: 54px;
        height: 54px;
        border-radius: @radius-md;
        flex: none;
        margin-right: @margin-md;
    }
    .user-one__right {
        flex: 1;
        .user-one__title {
            color: #000;
        }
        .user-one__text {
            margin-top: @margin-sm;
            color: @gray-6;
            padding-bottom: @padding-md;
            border-bottom: 1px solid @gray-3;
        }
        .user-line {
            width: 1px;
            height: 16px;
            background-color: #dfe2e6;
            margin: 0 12px;
            display: inline-block;
            vertical-align: sub;
        }
    }
}
.od-one {
    display: flex;
    margin-top: @margin-md;
    margin-bottom: @margin-mdl;
    .od-one__item {
        flex: none;
        width: 33.33%;
        p {
            width: 100%;
            margin-bottom: @margin-sm;
            font-size: @font-size-md;
            color: @gray-8;
            .price-icon {
                font-size: @font-size-sm;
            }
        }
    }
}
</style>
